<template>
    <div class="container" ref="Area">
        <div class="Name">
            校内资讯平台
            <!-- <div>一款基于vue3开发包含管理、交流的系统，推荐企业化使用</div> -->
        </div>
        <div class="use" @click="signVueShow=!signVueShow">
            <el-icon size="1vw" color="#fff">
                <User />
             
            </el-icon>
            <span>点击进行登录，并开始使用吧!</span>
        </div>
        <Transition name="slide-fade">
            <SignIn v-show="signVueShow"></SignIn>
</Transition>

    </div>

</template>

<script lang="ts">
export default { name: 'sing' };
</script>

<script lang="ts" setup>
import * as THREE from 'three'
import CLOUDS from 'vanta/src/vanta.rings'
import { onMounted,onActivated, onBeforeUnmount, ref } from 'vue'
import SignIn from './SignIn.vue';
let marks=false
onActivated(()=>{
    console.log(1);
    if(marks){
        location.reload();
    }else{
        marks=true
    }
})


const Area = ref(null)
//创建一个全局的变量来使用vanta.js
/**
  *因为在vue2中，是使用this.vantaEffect来创建指定的3d动画模板的
  *但是vue3 setup中是没有this，所以要另外创建一个
**/
let vantaEffect: any = null;
//在两个生命周期钩子内创建vantaEffect
onMounted(() => {
    
    vantaEffect =
        CLOUDS({
            el: Area.value,
            THREE: THREE,
            mouseControls: true,
            touchControls: true,
            gyroControls: false,
            minHeight: 200.00,
            minWidth: 200.00,
            scale: 1.00,
            scaleMobile: 1.00,
            color: 0x71607
        })

})
onBeforeUnmount(() => {
    if (vantaEffect) {
        vantaEffect.destroy()
    }
})

let signVueShow=ref<boolean>(false)
</script>

<style lang=less  scoped>
.slide-fade-enter-active {
  transition: all 0.3s ease-out;
}

.slide-fade-leave-active {
  transition: all 0.8s cubic-bezier(1, 0.5, 0.8, 1);
}

.slide-fade-enter-from,
.slide-fade-leave-to {
  transform: translateY(-3vw);
  opacity: 0;
}
.use{
    position: absolute;
    right: 10%;
    top:3vw;
    cursor: pointer;
    color: #fff;
    .flexAc();
    span{
        margin-left: 10px;
    }
}
.container {
    width: 100vw;
    // background-image: url(@/assets/image/login_bg.svg);
    background-repeat: no-repeat;
    background-size: 100%;
    height: 100vh;
    position: relative;
}










.Name {
    font-size: 3vw;
    color: #fff;
    position: absolute;
    left: 6%;
    top: 30%;

    div {
        margin-top: 20px;
        font-size: 1.5vw;
    }
}
</style>